<!--
* @description  
* @fileName  1_引出生命周期
* @author zhoujunlin
* @date 2022-04-01 20:17:29
* @version V1.0.0
!-->
<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>1_引出生命周期</title>
    <script src="../js/vue.js"></script>
</head>

<!-- 
生命周期：
1. 生命周期回调函数、生命周期函数、生命周期钩子
2. Vue在关键时刻帮我们调用的一些特殊名称的函数
3. 生命周期函数的名字不可更改，但函数的具体内容是程序员根据需求编写的。
4. 生命周期函数的this指向是vm或组件实例对象。这意味着你不能使用箭头函数来定义一个生命周期方法
 (例如 created: () => this.fetchTodos())。
 -->

<body>
    <div id="app">
        <h2 :style="{opacity:opacity}">欢迎学习Vue</h2>
        <button @click="opacity=1">透明度设为1</button>
        <button @click="stop">点我停止变换</button>
    </div>

    <script>
        Vue.config.productionTip = false
        var vm = new Vue({
            el: '#app',
            data() {
                return {
                    opacity: 1
                }
            },
            created() { // 实例被创建之后执行代码

            },
            methods: { // 方法
                stop() {
                    this.$destroy()
                }
            },
            // Vue完成模板的解析并把初始的真实DOM元素放在页面后（挂载完毕）调用mounted
            // 只是初始化的时候调用一次，后续数据更改重新解析模板时不会再次调用
            mounted() {
                console.log('mounted', this);
                this.timer = setInterval(() => {
                    // 这里箭头函数无this 自动寻找上下文this 找到mounted中this  这里this为vm
                    console.log('setInterval');
                    this.opacity -= 0.01
                    if (this.opacity <= 0) this.opacity = 1
                }, 16);
            },
            beforeDestroy() {
                console.log('vm即将被销毁');
                // 销毁前清除定时器
                clearInterval(this.timer);
            },
        });
        // 定时器代码也可以写在外部使用  不推荐
        /* setInterval(() => {
            vm.opacity -= 0.01
            if (vm.opacity <= 0) vm.opacity = 1
        }, 16); */
    </script>
</body>

</html>